<template>
  <div class="container">
      <el-tabs tab-position="left"  type="border-card">
        <el-tab-pane label="个人资料"> <Profile /> </el-tab-pane>
        <el-tab-pane label="安全设置"> <Security /></el-tab-pane>
        <el-tab-pane label="账号绑定"> <Bind /> </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import Profile from '@/views/Settings/Profile'
import Security from '@/views/Settings/Security'
import Bind from '@/views/Settings/Bind'

export default {
  name: 'Account',
  components: { Profile, Security, Bind },
  data () {
    return {}
  },
  created () {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 1166px;
  margin: 0 auto;
}

::v-deep .el-tabs__content {
  padding: 0 0 0 8px;
}

::v-deep.el-tabs--left.el-tabs--border-card {
  margin-top: 20px;
  height: 100vh;
  background: #e9eef3;
  border: 0px solid #dcdfe6;
  .el-tabs__header.is-left {
    border-right: 0px solid #dfe4ed;
  }
  .is-active {
    border-radius: 3px;
    background: #e8f3ff;
    color: #1d7dfa;
  }
  .el-tabs__nav-scroll {
    width: 200px;
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 8px;
    .el-tabs__item {
      letter-spacing: 1px;
      height: 40px;
      line-height: 40px;
      font-size: 14.5px;
      text-align: center;
      border: none;
      &:hover {
        background: #e8f3ff;
        color: #1d7dfa;
      }
    }
  }
}
</style>
